<template>
  <div class="list-div">
    <el-row>
      <el-form>
        <el-col :span="24">
          <el-col :span="4">

            <el-form-item label="姓名/电话" label-width="80px">
              <el-input v-model="searchText"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
            <el-form-item label="角色" prop="roles" label-width="80px">
              <el-select v-model="roleId" clearable filterable placeholder="请选择角色" style="width: 100%">
                <el-option :label="r.name" :value="r.id" :key="r.id" v-for="r,rdix in rolelist"></el-option>
              </el-select>
            </el-form-item>
            </div>
          </el-col>

          <el-col :span="8"><div class="grid-content bg-purple-light">
            <el-form-item label="" label-width="30px">
              <el-button class="btn" size="mini"  @click="getData()">搜索</el-button>
              <el-button class="btnAdd" size="mini"  @click="add()">添加</el-button>
            </el-form-item>
          </div></el-col>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="page.records" header-row-class-name="tableheader" height="calc(100vh - 220px)" border  style="width: 100%">
        <el-table-column
          prop="username"
          label="用户登录名">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column  prop="phone" label="电话"> </el-table-column>
        <el-table-column  prop="phone" label="角色">
          <template slot-scope="scope">
            <div class="_el_tag"><el-tag type="danger" :key="ridx" v-for="r,ridx in scope.row.roleList">{{r.roleName}}</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="启用/停用">
          <template slot-scope="scope">
            <span v-if="scope.row.status=='1'">启用</span>
            <span v-if="scope.row.status=='0'">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="380">
          <template slot-scope="scope"  v-if="scope.row.id>0">
            <el-button class="opt1" size="mini"  @click="edit(scope.$index, scope.row)">编辑</el-button>
            <el-button class="opt2" size="mini"  type="success"  @click="enable(scope.$index, scope.row,0)" v-if="scope.row.status=='1'">停用</el-button>
            <el-button class="opt3" size="mini"  type="primary" @click="enable(scope.$index, scope.row,1)" v-if="scope.row.status=='0'">启用</el-button>
            <el-button class="opt4" size="mini"  type="warning"  @click="updateShow(scope.$index, scope.row)">设置密码</el-button>
            <el-button class="opt5" size="mini"  type="danger"  @click="deleteData(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="pagination">


      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="page.size"
        layout="total,  prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>

    </div>

    <el-dialog :title="showTitle" :visible.sync="showEdit">

      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-show="showpassword">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="启用/停用">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
          <el-select v-model="form.roles" clearable multiple filterable placeholder="请选择角色" style="width: 100%">
            <el-option :label="r.name" :value="r.id" :key="r.id" v-for="r,rdix in rolelist"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="btnAdd" type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>


    <el-dialog title="修改密码" :visible.sync="showUpdatePassword">
      <el-form ref="passwordform" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="btnAdd" type="primary" @click="updatepassword()">设置密码</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'SystemUser',
    data () {
      return {
        optType:'',
        searchText:'',
        roleId:'',
        showEdit: false,
        showUpdatePassword: false,
        showTitle: '',
        page: {},
        pageNo: 1,
        rolelist:[],
        showpassword: true,
        form: {
          id:'',
          username: '',
          password: '',
          status: false,
          name: '',
          roles: [],
          phone:''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入电话', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          roles: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ]
        }
      }
    },
    methods: {

      handleCurrentChange(val){
        this.pageNo = val
        this.getData()
      },
      getData(){
        this.$axios.get('/admin/user/list', {
          params: {
            searchText: this.searchText,
            pageNo: this.pageNo,
            roleId:this.roleId
          }
        }).then(r => {
          let res = r.data
          if (res.code !== 1) {
            this.$message.error(res.msg)
            return
          }
          this.page = res.data
        })
      },
      getRole(){
        this.$axios.get('/admin/select/role', {
          params: {
          }
        }).then(r => {
          let  res = r.data
          if (res.code !== 1) {
            this.$message.error(res.msg)
            return
          }
          this.rolelist = res.data
        })
      },
      add(){
        this.optType='add'
        this.showEdit = true
        this.showTitle = '添加'
        this.showpassword = true
        this.form={
          id:'',
          username: '',
          password: '',
          status: false,
          name: '',
          roles: [],
          phone:''
        }
      },
      edit(idx,row){
        this.optType='edit'
        this.form.password='none'
        this.showEdit = true
        this.showTitle = '修改'
        this.showpassword = false
        this.form.id=row.id
        this.form.username=row.username
        this.form.status=row.status=='1'
        this.form.name=row.name
        this.form.phone=row.phone
        let rs = []
        for (var i=0;i<row.roleList.length;i++){
          rs.push(row.roleList[i].roleId)
        }
        this.form.roles=rs
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = '/admin/user/add'
            if (this.optType=='edit'){
              url = '/admin/user/update'
            }
            this.$axios.post(url, {
              id: this.form.id,
              username:this.form.username,
              password:this.form.password,
              status:this.form.status ? '1' : '0',
              name:this.form.name,
              phone: this.form.phone,
              roles:this.form.roles.toString(),
            }).then(r => {
              let  res = r.data
              this.$message.error(res.msg)
              if (res.code !== 1) {
                return
              }
              this.showEdit = false
              this.getData()
              this.resetForm('form')
            })
          } else {
            return false;
          }
        });
      },

      enable(idx,d,status){
        let msg = '是否停用'
        let type='warning'
        let url = '/admin/user/stop'
        if (status=='1'){
          msg = '是否启用'
          type='success'
          url = '/admin/user/start'
        }

        this.$confirm(msg, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: type
        }).then(() => {

          this.$axios.get(url, {
            params: {
              id: d.id,
            }
          }).then(r => {
            let  res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.getData()
          })

        }).catch(() => {

        });
      },

      deleteData(idx,d){
        let url = '/admin/user/delete?'
        this.$confirm('是否删除['+d.name +']', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {

          this.$axios.get(url, {
            params: {
              id: d.id,
            }
          }).then(r => {
            let  res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.getData()
          })

        }).catch(() => {

        });
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      updateShow(idx,d){
        this.showUpdatePassword= true
        this.form.id=d.id
        this.form.password=''
      },
      updatepassword(){
        this.$refs['passwordform'].validate((valid) => {
          if (valid) {
            console.info('1212')
            this.$axios.get('admin/user/set-password', {
              params: {
                id: this.form.id,
                password:this.form.password,
              }
            }).then(r => {
              let  res = r.data
              this.$message.error(res.msg)
              if (res.code !== 1) {
                return
              }
              this.showUpdatePassword = false
              this.getData()
            })
          } else {
            return false;
          }
        });
      },

      init () {
        this.getRole()
        this.getData()
      }
    },
    mounted: function () {
    },
    created: function () {
      this.init()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>
